<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>上传文件</title>
		<style>
			#fuel {
				transition: .3s;
			}
		</style>
	</head>
	<body>
		<label for="fuel">Fuel level:</label>
		<meter id="fuel"
		       min="0" max="100"
		       low="33" high="66" optimum="80"
		       value="10">
		</meter>
		<button onclick="valueAdd()" >++</button>
		<hr/>
		<textarea name="" id="input" cols="30" rows="10" >章鱼哥我们一起去抓水母吧</textarea>
		<button onclick="handleTransform()">一键转换</button>
		<button onclick="handleChangeVoice()">换一种声音</button>
		<button onclick="handlePlay()">播放</button>
		<script src="./jquery.js"></script>
		<script>
			const fuel = document.querySelector("#fuel");
			function valueAdd() {
				if (fuel.value === 100) fuel.value = 0;
				else fuel.value += 10;
			}

			class Speaker {
				speaker;
				constructor(text = '', volume = 1, lang = 'zh-CN') {
						this.speaker = new SpeechSynthesisUtterance();
						this.speaker.text = text;
						this.speaker.volume = volume;
						this.speaker.lang = lang;
				}
				play() {
					this.stop();
					speechSynthesis.speak(this.speaker);
				}
				stop() {
					speechSynthesis.cancel();
				}
				setText(text = '') {
					this.speaker.text = text;
				}
				setVolume(volume = 1) {
					if (volume < 0 || volume > 2) return;
					this.speaker.volume = volume;
				}
				setVoice(voice) {
					this.speaker.voice = voice;
				}
			}
			
			const input = document.querySelector('#input');
			const speak = new Speaker();
			let voiceList = [];
			let index = 0;
			speechSynthesis.addEventListener('voiceschanged', () => {
					voiceList = speechSynthesis.getVoices();
			});
			const handleTransform = () => {
				speak.setText(input.value);
			};
			const handlePlay = () => {
				speak.play();
			};
			const handleChangeVoice = () => {
				index++;
				speak.setVoice(voiceList[index]);
				console.log('声音已更换', voiceList);
			};
		</script>
	</body>
</html>
